<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
                                     initial-scale=1.0,
                                     maximum-scale=1.0,
                                     user-scalable=no">
    <title>首页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <style type="text/css">
        html{overflow:hidden;}
        body{position:absolute;margin:0px;padding:0px;background:#eee;width:100%;height:100%;color:#fff;font-family:arial;font-size:0.8em;}
        /* screen */
        #screen{position:absolute;width:100%;height:100%;background:url(../images/35a85edf8db1cb13639479b6d854564e93584b91.jpg);background-size:cover;overflow:hidden;}
        #screen img, canvas{position:absolute;left:-9999px;cursor:pointer;image-rendering:optimizeSpeed;}
        #screen .href{border:#FFF dotted 1px;}
        #screen .fog{position:absolute;background:#fff;opacity:0.2;filter:alpha(opacity=10);}
        #command{position:absolute;left:1em;top:1em;width:200px;z-index:30000;background:#fff;border:#000 solid 1em;}
        #bar{position:relative;left:1em;top:1em;height:160px;}
        #bar .button{position:absolute;background:#222;width:40px;height:40px;cursor:pointer;}
        #bar .loaded{background:#666;}
        #bar .viewed{background:#fff;}
        #bar .selected{background:#f00;}
        #urlInfo{position:absolute;background:rgba(6,201,2,1) no-repeat 0 4px;border-radius:0 0 20px 20px;padding:0;visibility:hidden;z-index:30000;padding-left:0;cursor:pointer;}
        #urlInfo p{
            padding-left:20px;
            text-align: center;
            color:#fff;
        }
        #screen .href {
            border: #FFF dotted 0px;
            border-radius:20px 20px 0 0;
        }
        #pp{
            float:right;
        }
    </style>

    <script type="text/javascript">
        var m3D = function () {
            /* ---- private vars ---- */
            var diapo = [],
                    imb,
                    scr,
                    bar,
                    selected,
                    urlInfo,
                    imagesPath = "../img/Head_portrait/",
                    camera = {x:0, y:0, z:-650, s:0, fov: 500},
                    nw = 0,
                    nh = 0;
            /* ==== 镜头渐变的方法 ==== */
            camera.setTarget = function (c0, t1, p) {
                if (Math.abs(t1 - c0) > .1) {
                    camera.s = 1;
                    camera.p = 0;
                    camera.d = t1 - c0;
                    if (p) {
                        camera.d *= 2;
                        camera.p = 9;
                    }
                }
            }
            camera.tween = function (v) {
                if (camera.s != 0) {
                    camera.p += camera.s;
                    camera[v] += camera.d * camera.p * .01;
                    if (camera.p == 10) camera.s = -1;
                    else if (camera.p == 0) camera.s = 0;
                }
                return camera.s;
            }
            /* diapo */
            var Diapo = function (n, img, x, y, z) {
                if (img) {
                    this.url = img.url;
                    this.title = img.title;
                    this.color = img.color;
                    this.isLoaded = false;
                    if (document.createElement("canvas").getContext) {
                        /* ---- using canvas in place of images (performance trick) ---- */
                        this.srcImg = new Image();
                        this.srcImg.src = imagesPath + img.src;
                        this.img = document.createElement("canvas");
                        this.canvas = true;
                        scr.appendChild(this.img);
                    } else {
                        /* ---- normal image ---- */
                        this.img = document.createElement('img');
                        this.img.src = imagesPath + img.src;
                        scr.appendChild(this.img);
                    }
                    /* ---- on click event ---- */
                    this.img.onclick = function () {
                        if (camera.s) return;
                        if (this.diapo.isLoaded) {
                            if (this.diapo.urlActive) {
                                /* ---- jump hyperlink ---- */
                                top.location.href = this.diapo.url;
                            } else {
                                /* ---- target positions ---- */
                                camera.tz = this.diapo.z - camera.fov;
                                camera.tx = this.diapo.x;
                                camera.ty = this.diapo.y;
                                /* ---- disable previously selected img ---- */
                                if (selected) {
                                    selected.but.className = "button viewed";
                                    selected.img.className = "";
                                    selected.img.style.cursor = "pointer";
                                    selected.urlActive = false;
                                    urlInfo.style.visibility = "hidden";
                                }
                                /* ---- select current img ---- */
                                this.diapo.but.className = "button selected";
                                interpolation(false);
                                selected = this.diapo;
                            }
                        }
                    }
                    /* ---- command bar buttons ---- */
                    this.but = document.createElement('div');
                    this.but.className = "button";
                    bar.appendChild(this.but);
                    this.but.innerHTML="*";
                    this.but.diapo = this;
                    this.but.style.left = Math.round((this.but.offsetWidth  * 1.2) * (n % 1)) + 'px';
                    this.but.style.top  = Math.round((this.but.offsetHeight * 1.2) * Math.floor(n / 1)) + 'px';
                    this.but.onclick = this.img.onclick;
                    imb = this.img;
                    this.img.diapo = this;
                    this.zi = 25000;
                } else {
                    /* ---- transparent div ---- */
                    this.img = document.createElement('div');
                    this.isLoaded = true;
                    this.img.className = "fog";
                    scr.appendChild(this.img);
                    this.w = 300;
                    this.h = 300;
                    this.zi = 15000;
                }
                /* ---- object variables ---- */
                this.x = x;
                this.y = y;
                this.z = z;
                this.css = this.img.style;
            }
            /* ==== main 3D animation ==== */
            Diapo.prototype.anim = function () {
                if (this.isLoaded) {
                    /* ---- 3D to 2D projection ---- */
                    var x = this.x - camera.x;
                    var y = this.y - camera.y;
                    var z = this.z - camera.z;
                    if (z < 20) z += 5000;
                    var p = camera.fov / z;
                    var w = this.w * p;
                    var h = this.h * p;
                    /* ---- HTML rendering ---- */
                    this.css.left   = Math.round(nw + x * p - w * .5) + 'px';
                    this.css.top    = Math.round(nh + y * p - h * .5) + 'px';
                    this.css.width  = Math.round(w) + 'px';
                    this.css.height = Math.round(h) + 'px';
                    this.css.zIndex = this.zi - Math.round(z);
                } else {
                    /* ---- image is loaded? ---- */
                    this.isLoaded = this.loading();
                }
            }
            /* ==== onload initialization ==== */
            Diapo.prototype.loading = function () {
                if ((this.canvas && this.srcImg.complete) || this.img.complete) {
                    if (this.canvas) {
                        /* ---- canvas version ---- */
                        this.w = this.srcImg.width*4;
                        this.h = this.srcImg.height*4;
                        this.img.width = this.w;
                        this.img.height = this.h;
                        var context = this.img.getContext("2d");
                        context.drawImage(this.srcImg, 0, 0, this.w, this.h);
                    } else {
                        /* ---- plain image version ---- */
                        this.w = this.img.width;
                        this.h = this.img.height;
                    }
                    /* ---- button loaded ---- */
                    this.but.className += " loaded";
                    return true;
                }
                return false;
            }
            ////////////////////////////////////////////////////////////////////////////
            /* ==== screen dimensions ==== */
            var resize = function () {
                nw = scr.offsetWidth * .5;
                nh = scr.offsetHeight * .5;
            }
            /* ==== disable interpolation during animation ==== */
            var interpolation = function (bicubic) {
                var i = 0, o;
                while( o = diapo[i++] ) {
                    if (o.but) {
                        o.css.msInterpolationMode = bicubic ? 'bicubic' : 'nearest-neighbor'; // makes IE8 happy
                        o.css.imageRendering = bicubic ? 'optimizeQuality' : 'optimizeSpeed'; // does not really work...
                    }
                }
            }
            /* ==== init script ==== */
            var init = function (data) {
                /* ---- containers ---- */
                scr = document.getElementById("screen");
                bar = document.getElementById("bar");
                urlInfo = document.getElementById("urlInfo");
                resize();
                /* ---- loading images ---- */
                var i = 0,
                        o,
                        n = data.length;
                while( o = data[i++] ) {
                    /* ---- images ---- */
                    var x = 1000 * ((i % 4) - 1.5);
                    var y = Math.round(Math.random() * 4000) - 2000;
                    var z = i * (5000 / n);
                    diapo.push( new Diapo(i - 1, o, x, y, z));
                    /* ---- transparent frames ---- */
                    var k = diapo.length - 1;
                    for (var j = 0; j < 3; j++) {
                        var x = Math.round(Math.random() * 4000) - 2000;
                        var y = Math.round(Math.random() * 4000) - 2000;
                        diapo.push( new Diapo(k, null, x, y, z + 100));
                    }
                }
                /* ---- start engine ---- */
                run();
            }
            ////////////////////////////////////////////////////////////////////////////
            /* ==== main loop ==== */
            var run = function () {
                /* ---- x axis move ---- */
                if (camera.tx) {

                    if (!camera.s) camera.setTarget(camera.x, camera.tx);
                    var m = camera.tween('x');
                    if (!m) camera.tx = 0;
                    /* ---- y axis move ---- */
                } else if (camera.ty) {
                    if (!camera.s) camera.setTarget(camera.y, camera.ty);
                    var m = camera.tween('y');
                    if (!m) camera.ty = 0;
                    /* ---- z axis move ---- */
                } else if (camera.tz) {
                    if (!camera.s) camera.setTarget(camera.z, camera.tz);
                    var m = camera.tween('z');
                    if (!m) {
                        /* ---- animation end ---- */
                        camera.tz = 0;
                        interpolation(true);
                        /* ---- activate hyperlink ---- */
                        if (selected.url) {
                            selected.img.style.cursor = "pointer";
                            selected.urlActive = true;
                            selected.img.className = "href";
                            urlInfo.diapo = selected;
                            urlInfo.onclick = selected.img.onclick;
                            urlInfo.innerHTML = selected.title;
                            //urlInfo.innerHTML = "<p>用户名:李先生</p><p>性别:男</p><p>等级:10</p>";
                            urlInfo.style.visibility = "visible";
                            urlInfo.style.color = selected.color || "#fff";
                            urlInfo.style.top = Math.round(selected.img.offsetTop+selected.img.offsetHeight) +"px";
                            urlInfo.style.width = Math.round(selected.img.offsetWidth) +"px";
                            urlInfo.style.left = Math.round(selected.img.offsetLeft+selected.img.offsetWidth-urlInfo.offsetWidth) +"px";

                        } else {
                            selected.img.style.cursor = "default";
                        }
                    }
                }
                /* ---- anim images ---- */
                var i = 0, o;
                while( o = diapo[i++] ) o.anim();
                /* ---- loop ---- */
                setTimeout(run, 32);
            }
            return {
                ////////////////////////////////////////////////////////////////////////////
                /* ==== initialize script ==== */
                init : init
            }
        }();

    </script>
</head>

<body>

<div id="screen">
    <div id="command">
        <h1></h1>
        <p></p>
        <div id="bar"></div>
    </div>
    <div id="urlInfo"></div>
    <div id="pp col-sm">
        <div><img src="../img/Head_portrait/1.jpg"></div>
        <h4>用户名：李先生</h4>
        <p>性别：男</p>
        <p>等级：10级</p>
    </div>
</div>

<script type="text/javascript">
    /* ==== start script ==== */
    setTimeout(function() {
        m3D.init(
                [
                    { src: '1.jpg', url: '#', title: '<p>用户名:李先生</p><p>性别:男</p><p>等级:10</p>', color: '#000', size: '30px'},
                    { src: '2.jpg', url: '#', title: '', color: '#000', size: '30px' },
                    { src: '3.jpg' , url: '#', title: '', color: '#000', size: '30px' },
                    { src: '4.jpg' , url: '#', title: '', color: '#000', size: '30px' },
                    { src: '5.jpg' , url: '#', title: '', color: '#000', size: '30px' },
                    { src: '6.jpg' , url: '#', title: '', color: '#000', size: '30px' },
                    { src: '7.jpg' , url: '#', title: '', color: '#000', size: '30px' },
                    { src: '8.jpg' , url: '#', title: '', color: '#000', size: '30px' },
                    { src: '9.jpg' , url: '#', title: '', color: '#000', size: '30px' },
                ]
        );
    }, 500);
</script>
<!--<script type="text/javascript">
    $(document).ready(function(){




            var indp="#bar div.button:nth-of-type("+ind+")";
            var indpp="#bar div.button";
            $(indpp).each(function(){

            $(indp).html($(this).index);
            alert(ind);
        }

    });
</script>-->

</body>
</html>